<template>
  <div style="padding: 0 16px 16px 16px">
    <div v-for="([groupName, walletList], index) in Object.entries(groupedWallets)" :key="index">
      <div
        :style="{
          marginTop: index !== 0 ? '14px' : 0,
          color: groupName === 'Installed' ? '#d9fc01' : ''
        }"
        style="padding-left: 6px; font-weight: bold; font-size: 14px"
      >
        {{ groupName }}
      </div>
      <div
        class="wallet-button-content"
        :style="{
          background: wallet?.name === item.name ? '#d9fc01' : '',
          color: wallet?.name === item.name ? '#1b1f1d' : ''
        }"
        v-for="(item, index) in walletList"
        :key="index"
        @click="checkedWallet(item)"
      >
        <img class="wallet-button-content__logo" :src="item.icon ?? item.iconUrl" />
        <div class="wallet-button-content__label">
          <div style="font-size: 16px; line-height: 16px; font-weight: bold">{{ item.name }}</div>
          <div
            style="font-size: 12px; line-height: 12px"
            :style="{ color: wallet?.name === item.name ? '#1b1f1d' : '#d9fc01' }"
          >
            {{ item.recent ? 'recent' : '' }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { useWalletConnectors, type WalletConnector } from '../../wallets/useWalletConnectors'
  import { groupBy } from '../../utils/groupBy'

  withDefaults(defineProps<{ wallet: WalletConnector | undefined }>(), {})
  const emits = defineEmits(['selectWallet'])

  const wallets = useWalletConnectors(true)
    .filter((wallet) => wallet.ready || !!wallet.extensionDownloadUrl)
    .sort((a, b) => a.groupIndex - b.groupIndex)

  const groupedWallets = groupBy(wallets, (wallet) => wallet.groupName)

  const checkedWallet = (wallet: WalletConnector) => {
    emits('selectWallet', wallet)
  }
</script>

<style lang="scss" scoped>
  .wallet-button-content {
    display: flex;
    padding: 6px;
    gap: 8px;
    align-items: center;
    margin-bottom: 4px;
    border-radius: 4px;
    transition: all 0.3s ease;
    cursor: pointer;
    &:hover {
      background: rgba(224, 232, 255, 0.1);
    }
    &:active {
      transform: scale(0.97);
    }
    .wallet-button-content__logo {
      max-width: none;
      width: 28px;
      height: 28px;
      flex-shrink: 0;
      border-radius: 4px;
    }
    .wallet-button-content__label {
      font-weight: bold;
      flex-shrink: 0;
    }
  }
</style>
